<template>
	<div>
		<van-row>
			<!-- 搜索 -->
			<van-field v-model="query.keyWord" clearable label="商品搜索" placeholder="请输入关键字">
				<template #button>
					<van-button size="small" type="primary" @click="onSearch">搜索</van-button>
				</template>
			</van-field>
		</van-row>
		<van-row>
			<!-- 左侧分类 -->
			<van-col span="6">
				<van-sticky :offset-top="46">
					<van-sidebar v-model="activeKey">
						<van-sidebar-item v-for="(item,i) in categoryList" :key="i" :title="item.name"
							@click="onClickLeftMenus(item.id)" />
					</van-sidebar>
				</van-sticky>

			</van-col>
			<!-- 右侧商品列表 -->
			<van-col span="18">

				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
						:immediate-check="false" :offset="0">
						<!-- 商品卡片列表 -->
						<van-card v-for="(item,i) in productList" :key="i" :price="item.price" :desc="item.spec"
							:title="item.title" :thumb=" APIDomainName + item.pic" @click="onDetail(item.id)" />
					</van-list>

				</van-pull-refresh>

			</van-col>
		</van-row>
	</div>
</template>

<script>
	//1.导入封装后的接口	
	import {
		getProductListAPI
	} from "@/api/product.js";
	import {
		getCategoryAPI
	} from "@/api/category.js"

	export default {
		data() {
			return {
				productList: [], //商品类别（指定分类id）
				categoryList: [], //分类列表				

				//左侧 导航栏
				activeKey: 0,

				pageTotal: 0, //总页数

				//上拉加载控制变量
				loading: false,
				finished: false,

				//下拉刷新
				refreshing: false,

				//查询参数
				query: {
					category_id: null,
					pageIndex: 0, //当前页码
					pageSize: 8, //页码大小
					keyWord: "", //查询关键字
				},
			}
		},

		//生命周期的钩子函数，当实例别创建好了后被调用
		created() {
			//获取所有分类
			getCategoryAPI().then(result => {
				console.log(result); //调式输出，也可以看看数据结构
				this.categoryList = result.data;
				this.query.category_id = this.categoryList[0].id; //取分类列表中的第一个分类id
				this.onRefresh();
			});
		},
		methods: {

			// 单击左菜单中的某一项后，显示对应分类的商品列表
			onClickLeftMenus(category_id) {
				this.query.category_id = category_id; //更新分类id				
				this.onRefresh();
			},

			onDetail(id) {
				this.$router.push({
					name: 'productDetail',
					params: {
						id
					},
				});
			},

			//上拉加载
			onLoad() {
				this.query.pageIndex += 1; //页码增加	
				getProductListAPI(this.query).then(result => {
					//如果时刷新就商品列表清空
					if (this.refreshing) {
						this.productList = [];
						this.refreshing = false;
					}

					//总页数
					this.pageTotal = result.pageTotal;
					//数组 拼接
					if (result.data.length > 0) {
						this.productList = this.productList.concat(result.data);
					}

					this.loading = false;

					if (this.query.pageIndex >= this.pageTotal) {
						this.finished = true;
					}

				});

			},

			//下拉刷新
			onRefresh() {
				// 清空列表数据
				this.finished = false;
				this.query.pageIndex = 0; //重置页号
				this.productList = [];

				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.onLoad();
			},

			//搜索商品
			onSearch() {
				this.onRefresh();
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.van-sidebar {
		width: 100px;
	}

	.van-sidebar-item {
		padding: 10px;
	}

	.van-card {
		font-size: 14px;

		.van-card__content {
			justify-content: center;

			.van-card__price {
				color: red;
				font-weight: bold;
				text-align: right;
			}
		}
	}
</style>
